<template>
  <div style="margin-bottom: 20px">
    <ButtonGroup
      v-if="!isEdit"
      :options="clueButtons"
      style="margin-bottom: 20px"
      @click="handleButtonClick"
    />
    <p-table
      class="table-list-container"
      row-key="id"
      :columns="columns"
      :pagination="false"
      bordered
      :data-source="fileTableData"
      :row-selection="rowSelectionMixin"
      :loading="load"
      :scroll="{ y: 350 }"
      @change="handleTableChange"
    >
      <a
        slot="atthName"
        slot-scope="text, records"
        :href="records.atthAccessPath"
        @click="handleNumberClick(text, records)"
      >
        {{ text }}
      </a>
    </p-table>
  </div>
</template>
<script>
import mixinTable from '@/mixins/mixin-table.js';

export default {
  components: {},
  mixins: [mixinTable],
  props: {
    fileTableData: {
      type: Array,
      default: () => [],
    },
    isEdit: {
      type: Boolean,
      default: false,
    },
    load: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {};
  },
  computed: {
    columns() {
      const columns = [
        {
          align: 'center',
          title: '序号',
          width: 60,
          customRender(t, r, index) {
            return parseInt(index) + 1;
          },
        },
        {
          align: 'center',
          title: '附件标题',
          dataIndex: 'atthName',
          scopedSlots: { customRender: 'atthName' },
        },
        {
          align: 'center',
          title: '部门',
          dataIndex: 'createUserDeptName',
          ellipsis: true,
        },
        {
          align: 'center',
          title: '上传人姓名',
          dataIndex: 'createUserName',
          ellipsis: true,
        },

        {
          align: 'center',
          title: '上传时间',
          dataIndex: 'updateTime',
          ellipsis: true,
        },
      ];
      return columns;
    },
    clueButtons() {
      const disabled = !this.rowSelectionMixin.selectedRowKeys.length;
      return [
        {
          key: 'upFile',
          type: 'primary',
          label: '上传附件',
          icon: 'plus',
          authKey: '',
        },
        {
          key: 'fileDelete',
          label: '删除',
          icon: 'delete',
          authKey: '',
          disabled,
        },
      ];
    },
  },
  methods: {
    handleButtonClick(key) {
      const fn = `${key}Callback`;
      this[fn] && this[fn]();
    },
    upFileCallback() {
      this.$emit('up-file');
    },
    handleNumberClick(text, records) {},
    fileDeleteCallback() {
      const ids = this.rowSelectionMixin.selectedRowKeys;
      this.$confirm(`该操作将删除 ${ids.length} 条数据，是否确认？`)
        .then(() => {
          this.$emit('file-delete', ids);
          this.rowSelectionMixin.selectedRowKeys = [];
        })
        .catch(() => {
          // console.log('e: ', e);
        });
    },
  },
};
</script>
